<template>
    <view class="container">

        <!-- 文章内容区域 -->
        <view class="content-card">

            <!-- 文章标题和时间 -->
            <view class="article-header" v-if="info.title">
                <text class="article-title">{{info.title}}</text>
                <view class="article-info u-flex u-row-between u-col-center">
                    <view class="time-info u-flex u-col-center">
                        <uni-icons type="calendar" size="16" color="#888"></uni-icons>
                        <text class="time-text">{{info.time}}</text>
                    </view>
                    <view class="official-tag">{{info.tag}}</view>
                </view>
            </view>

            <!-- 分隔线 -->
            <view class="divider"></view>

            <!-- 文章内容 -->
            <view class="article-content" v-if="info.content">
                <dfer-html-parse :content="info.content" />
                <view style="margin-top: 1rem;"></view>
                <dfer-img :list="info.img" :trace="trace" />
            </view>

            <!-- 空状态 -->
            <view class="empty-state" v-else>
                <text class="icon empty-icon">&#xe643;</text>
                <text class="empty-text">暂无内容</text>
            </view>

            <block v-if="info.previewUrl">
                <view class="preview-title">
                    <text class="text">{{info.previewTitle}}</text>
                </view>
                <dfer-button @clickHandler="previewFile" title="预览附件" :enable="previewBtnEnable" />
            </block>

            <!-- 底部装饰 -->
            <view class="footer-decoration u-flex u-row-center" v-if="info.copyright">
                <text class="decoration-text">——— {{info.copyright}} ———</text>
            </view>

        </view>

        <!-- 返回顶部按钮 -->
        <view class="back-top" @click="backToTop" v-if="showBackTop">
            <uni-icons type="arrow-up" size="20" color="#fff"></uni-icons>
        </view>

    </view>
</template>

<script>
    /**
     * 文章详情
     * @description 此组件一般用于文本内容显示。
     * @tutorial https://www.dfer.site
     * @property {Object} data 数据
     * @example <dfer-detail-article :data="data" />
     */
    export default {
        name: "dfer-detail-article",
        props: {
            trace: {
                type: Boolean,
                default () {
                    return false
                }
            },
            info: {
                required: true,
                default () {
                    return {
                        title: '',
                        content: '',
                        tag: '',
                        previewTitle: '',
                        previewUrl: '',
                        copyright: '',
                        time: ''
                    }
                }
            }
        },
        watch: {
            info: {
                handler: function(newVal, oldVal) {
                    console.log(newVal, oldVal);
                    this.info = newVal;
                },
                // deep: true
            }
        },
        data() {
            return {
                showBackTop: false,
                previewBtnEnable: true
            }
        },
        created() {
            console.log('created');
            uni.openDocument
        },
        mounted() {
            console.log('mounted');
        },
        onPageScroll(e) {
            this.showBackTop = e.scrollTop > 300;
        },
        methods: {
            previewFile() {
                let _this = this;
                _this.previewBtnEnable = false;
                let url = _this.info.previewUrl;
                let cache_list = _this.getStorage('download_cache');
                if (!cache_list)
                    cache_list = {};
                if (cache_list && cache_list.hasOwnProperty(url)) {
                    _this.openDoc(cache_list[url]);
                } else {
                    const downloadTask = uni.downloadFile({
                        url: url,
                        success: function(res) {
                            var filePath = res.tempFilePath;
                            _this.openDoc(filePath);
                            cache_list[url] = filePath;
                            _this.setStorage({
                                download_cache: cache_list
                            });
                        },
                        fail: function(e) {
                            _this.showToast(JSON.stringify(e));
                        }
                    });
                    downloadTask.onProgressUpdate((res) => {
                        console.log('下载进度' + res.progress);
                        console.log('已经下载的数据长度' + res.totalBytesWritten);
                        console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
                        _this.showToast(`已下载：${res.progress}%`);
                        // if (res.progress > 50) {
                        //     downloadTask.abort();
                        // }
                    });
                }
            },
            openDoc(filePath) {
                let _this = this;
                uni.openDocument({
                    filePath: filePath,
                    showMenu: true,
                    success: function(res) {
                        console.log('打开文档成功');
                        _this.previewBtnEnable = true;
                    },
                    fail: function(e) {
                        _this.showToast(JSON.stringify(e));
                    }
                });
            },
            backToTop() {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f5f7fa;
    }

    .container {
        padding: 20rpx;
    }

    /* 顶部标题栏 */
    .header {
        height: 100rpx;
        background: linear-gradient(to right, #1a6cdf, #1a56b4);
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(26, 108, 223, 0.3);
    }

    .header-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #ffffff;
    }

    /* 内容卡片 */
    .content-card {
        background-color: #ffffff;
        border-radius: 12rpx;
        padding: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
    }

    /* 文章标题 */
    .article-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333333;
        line-height: 1.5;
        margin-bottom: 20rpx;
        display: block;
    }

    /* 文章信息 */
    .article-info {
        margin-bottom: 30rpx;
    }

    .time-info {
        font-size: 24rpx;
        color: #888888;
    }

    .time-text {
        margin-left: 8rpx;
    }

    .official-tag {
        background-color: #e6f0ff;
        color: $main-color;
        font-size: 22rpx;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
    }

    /* 分隔线 */
    .divider {
        height: 2rpx;
        background: linear-gradient(to right, $main-color, transparent);
        margin-bottom: 30rpx;
    }

    /* 文章内容 */
    .article-content {
        color: #333333;
        font-size: 30rpx;
        line-height: 1.8;
    }

    /* 内容样式调整 */
    .article-content p {
        margin-bottom: 30rpx;
        text-align: justify;
        text-indent: 2em;
    }

    .article-content img {
        max-width: 100%;
        border-radius: 8rpx;
        margin: 20rpx 0;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }

    .article-content h1,
    .article-content h2,
    .article-content h3 {
        color: #1a6cdf;
        margin: 40rpx 0 20rpx 0;
        font-weight: 600;
    }

    .article-content ul,
    .article-content ol {
        padding-left: 40rpx;
        margin-bottom: 30rpx;
    }

    .article-content li {
        margin-bottom: 10rpx;
    }

    .article-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 30rpx 0;
    }

    .article-content table,
    .article-content th,
    .article-content td {
        border: 1rpx solid #e0e0e0;
        padding: 20rpx;
    }

    .article-content th {
        background-color: #f0f6ff;
        color: #1a6cdf;
        font-weight: 600;
    }

    /* 底部装饰 */
    .footer-decoration {
        margin-top: 50rpx;
        padding-top: 30rpx;
        border-top: 1rpx dashed #e0e0e0;
    }

    .decoration-text {
        font-size: 24rpx;
        color: #aaaaaa;
    }

    /* 返回顶部按钮 */
    .back-top {
        position: fixed;
        right: 30rpx;
        bottom: 120rpx;
        width: 80rpx;
        height: 80rpx;
        background-color: $main-color;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4rpx 12rpx rgba(26, 108, 223, 0.4);
        z-index: 999;
    }


    /* 底部装饰 */
    .footer-decoration {
        margin-top: 40rpx;
        padding-top: 30rpx;
        border-top: 1rpx dashed #e0e0e0;
    }

    .decoration-text {
        font-size: 22rpx;
        color: #aaaaaa;
    }

    /* 空状态 */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100rpx 0;

        .empty-icon {
            color: #c0c4cc;
            font-size: 120rpx;
            margin-bottom: 30rpx;
        }

        .empty-text {
            color: #909399;
            font-size: 28rpx;
        }
    }


    .preview-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30rpx 0;

        .text {
            color: #909399;
            font-size: 28rpx;
        }
    }
</style>